<!--
 * @author: sanbao
 * @Date: 2022-07-31 15:43:17
-->
<style lang='scss' scoped>
.shop {
  .banxin_center {
    .topnav {
      font-size: 20px;
      height: 50px;
      line-height: 50px;
    }
    nav {
      ul {
        display: flex;

        span {
          padding: 10px;
          font-weight: 900;
        }
        li {
          padding: 10px 15px;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>

<template>
  <div class="shop">
    <div class="banxin_center">
      <div class="topnav">
        <span>首页</span> > <span>全部商品</span> > <span>分类</span>
      </div>
      <nav>
        <ul>
          <span>分类</span>
          <li @click="tablist((index = -1))">全部</li>
          <li
            v-for="(item, index) in NavList"
            :key="index"
            @click="tablist(item.category_id)"
          >
            {{ item.category_name }}
          </li>
        </ul>
      </nav>
      <my-data :list="shopAllshowList"></my-data>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, onMounted, watch } from "vue";
import Model from "@/api";
import MyData from "@/components/child/MyData.vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default {
  components: { MyData },
  setup() {
    onMounted(() => {
      postgetCategory();
      postgetAllProduct(data.pager);
      postgetProductByCategory(data.pager);
    });
    const store = useStore();
    const route = useRoute();
    let id = route.query.id;
    const searchVal = computed(() => store.state.searchval);
    const data = reactive({
      NavList: [],
      pager: {
        categoryID: [1],
        currentPage: 1,
        pageSize: 15,
      },
      shopAllshowList: [],
      shpoAlllist: [],
      fliterList: [],
    });
    const postgetCategory = async () => {
      const response = await Model.postgetCategory();
      data.NavList = response.data.category;
    };
    const postgetAllProduct = async (obj) => {
      const response = await Model.postgetAllProduct(obj);
      data.shopAllshowList = response.data.Product;
      data.fliterList = response.data.Product;
    };
    const postgetProductByCategory = async (obj) => {
      const response = await Model.postgetProductByCategory(obj);
      data.shpoAlllist = response.data.Product;
    };
    const tablist = async (index) => {
      if (index == -1) {
        postgetAllProduct(data.pager);
      } else {
        data.pager.categoryID = [index];
        await postgetProductByCategory(data.pager);
        data.shopAllshowList = data.shpoAlllist;
      }
    };
    watch(
      () => searchVal.value,
      (NewVal) => {
        data.shopAllshowList = data.fliterList.filter((v) =>
          v.product_name.includes(NewVal)
        );
      }
    );
    watch(
      () => id,
      async (NewVal) => {
        data.pager.categoryID = NewVal;
        await postgetProductByCategory(data.pager);
      }
    );
    return {
      ...toRefs(data),
      tablist,
    };
  },
};
</script>
